<template>
    <div class="category">
       <div class="left">
           <img v-lazy="imageUrl" width="100%">
       </div>
        <div class="flex-wrapper">
            <div class="img-container">
                <el-carousel height="350px" v-if="message.imageUrl">
                    <el-carousel-item v-for="item in message.imageUrl" :key="item">
                        <img :src="item" :alt="item" width="100%" height="100%">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="content-container">
                <table>
                    <tr style="background: cornflowerblue;color: white">
                        <th colspan="3">产品信息／Product Information</th>
                    </tr>
                    <tr>
                        <td>产品品牌</td>
                        <td>Product Brand</td>
                        <td>{{message.brand}}</td>
                    </tr>
                    <tr>
                        <td>产品描述（名称）</td>
                        <td>Product Description</td>
                        <td>{{message.designation}}</td>
                    </tr>
                    <tr>
                        <td>产品编号</td>
                        <td>part No</td>
                        <td>{{message.partsNumber}}</td>
                    </tr>
                    <tr>
                        <td>产品设备型号</td>
                        <td>Unit Model</td>
                        <td>{{message.unitModel}}</td>
                    </tr>
                    <tr>
                        <td>产品设备系统</td>
                        <td>System</td>
                        <td>{{message.systemName}}</td>
                    </tr>
                    <tr>
                        <td>产品适用设备</td>
                        <td>Unit</td>
                        <td>{{message.hostNumber}}</td>
                    </tr>
                    <tr>
                        <td>产品价格</td>
                        <td>Price</td>
                        <td>{{message.salePrice}}</td>
                    </tr>
                </table>
                <table>
                    <tr style="background: cornflowerblue;color: white">
                        <th colspan="3">产品规格</th>
                    </tr>
                    <tr>
                        <td>产品规格尺寸含包装</td>
                        <td>Size packaging</td>
                        <td>{{message.size}}</td>
                    </tr>
                    <tr>
                        <td>产品重量</td>
                        <td>Product Weight</td>
                        <td>{{message.weight}}</td>
                    </tr>
                    <tr>
                        <td>产品使用说明</td>
                        <td>instruction</td>
                        <td>{{message.instruction}}</td>
                    </tr>

                </table>
            </div>
        </div>
        <div class="clear"></div>
    </div>

</template>

<script>
    import {getPartsMenu} from "../url";
    import {ERROR_OK} from "../constVar";

    export default {
        data(){
            return{
                message:{},
                num:1,
                imageUrl:''
            }
        },
        created(){
            this.getPartDetail(this.$route.query.partsNumber);
            this.imageUrl = decodeURIComponent(this.$route.query.imageUrl)
        },
        methods:{
            async getPartDetail(id){
                const {status ,data} =  await getPartsMenu(id);
                if(status === ERROR_OK) {
                    this.message = data;
                }
            }
        },

    }
</script>

<style scoped lang="scss">
.category{
    .clear{clear: both}
    margin-top: 30px;
    .left{
        padding: 20px;
         -webkit-box-shadow: 2px -2px 2px #ddd;
        box-shadow: 2px -2px 2px #ddd;
        width: 30%;
        height: 783px;
        margin-right: 20px;
        float: left;
    }
    .center{
        margin-left: 30px;
        float: left;
        text-align: left;
        span{
            display: block;
            span{display: inline-block}
        }
        .img{
            float: left;
            height: 200px;
            width: 200px;
            background-color:#364d79;
        }
        .message{
            float: left;
            margin-left: 25px;
            padding: 10px 0;
            font-size: 20px;
            cursor: pointer;
            color: rgba(0,0,0,0.7);
            span{margin-bottom: 0px;}
            .title{
                font-size: 30px;
                color: #2c3e50;
            }
            .red{
                color: #bd2c00;
                letter-spacing: 2px;
            }
            .last{
                font-size: 14px;
                span{margin:10px 10px 20px 0}
            }
            input{
                width: 80px;
                height: 32px;
                text-align: center;
                margin-right: 30px;
                border-radius: 4px;
                border: 1px solid #ddd;
            }
            button{
                width: 102px;
                height: 32px;
                color: #fff;
                background-color:#1890ff;
                border-color: #1890ff;
                border-radius: 4px;
                outline:none;
            }
        }
    }
}
.flex-wrapper{
    box-sizing: border-box;
    margin-left: 40px;
    display: flex;
    .img-container{
        flex: 0 0 500px;
        max-height: 500px;
        border: 1px solid #ddd;
    }
    .content-container{
        padding: 0 20px;
        flex: 1;
        table{
            width: 100%;
            tr{
                &:nth-child(2n){
                    background: #ddd;
                }
            }
            thead{
                background: cornflowerblue;
                color: white;
            }
            td{
                width: 33%;
            }
        }
    }
}
</style>